<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="1000px" height="200px"></canvas>
  </body>
  <script>
    /**
     * 在画布上绘制一个点
     * @author liaoJie
     * @since 2025-05-10 17:00:27
     */

    /**
     * @param {WebGLRenderingContext} gl
     */
    function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      return shader;
    }

    const vsSource = `
      void main() {
        // 声明顶点位置
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        // 绘制点的大小
        gl_PointSize = 100.0;
      }
    `;

    const fsSource = `
      void main() {
        // 设置像素填充为红色
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

    const canvas = document.getElementById('canvas');
    /**
     * @type {WebGLRenderingContext} gl
     */
    const gl = canvas.getContext('webgl');

    // 创建顶点着色器
    const vShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
    // 创建片元着色器
    const fShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

    // 创建着色器程序
    const program = gl.createProgram();
    gl.attachShader(program, vShader);
    gl.attachShader(program, fShader);
    gl.linkProgram(program);

    gl.useProgram(program);

    // 设置画布为黑色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 从0开始绘制1个点
    gl.drawArrays(gl.POINTS, 0, 1);
  </script>
</html>
